<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>back-form</title>
    <link rel="stylesheet" type="text/css" href="../../static/admin/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="../../static/admin/css/admin.css"/>
</head>
<body>
<script type="text/javascript" src="../../static/admin/layui-v2.4.5/layui/layui.js"  charset="utf-8"></script>
<script src="../../static/admin/lib/echarts/echarts.js"></script>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>门诊看诊人数</legend>
</fieldset>

<div class="layui-form">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">选择日期时间范围</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="test10" placeholder=" -  -  - ">
            </div>
        </div>
    </div>
</div>

    <div class="layui-btn-container">
        <button id="zhe"class="layui-btn layui-btn-sm" lay-event="Zhe">查看折线图</button>
        <button id="mian"class="layui-btn layui-btn-sm" lay-event="ZheXian">查看面积图</button>
    </div>


<div class="wrap-container welcome-container">
    <div class="row">
        <div class="welcome-left-container col-lg-9">
            <!--<div class="data-show">-->
                <!--<ul class="clearfix">-->
                    <!--<li class="col-sm-12 col-md-4 col-xs-12">-->
                        <!--<a href="javascript:;" class="clearfix">-->
                            <!--<div class="icon-bg bg-org f-l">-->
                                <!--<span class="iconfont">&#xe606;</span>-->
                            <!--</div>-->
                            <!--<div class="right-text-con">-->
                                <!--<p class="name">就诊人数</p>-->
                                <!--<p><span class="color-org">89</span>数据<span class="iconfont">&#xe628;</span></p>-->
                            <!--</div>-->
                        <!--</a>-->
                    <!--</li>-->
                <!--</ul>-->
            <!--</div>-->
            <!--图表-->
            <div class="chart-panel panel panel-default">
                <div class="panel-body" id="chart" style="height: 376px;">
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    layui.use(['layer','jquery','laydate'], function(){
        var $=layui.jquery
        ,resize=layui.resize
        ,layer 	= layui.layer
        ,laydate = layui.laydate;
        var arry=[];
        var arry1=[];

        laydate.render({
            elem: '#test10'
            ,range: true
            ,done: function(value, date, endDate){
            alert(value);
            var string1=value.substring(0,10);
            var string2=value.substring(13,23);
            console.log(string1)
                console.log(string2)
                $.ajax({
                    url: '/hospital/Pat',
                    dataType: 'json',
                    type: 'post',
                    contentType: "application/json; charset=utf-8",
                    data:JSON.stringify({
                        "patCreatTime1":string1,
                        "patCreatTime2":string2,
                    }),
                    success: function (data) {
                        $.each(data.data, function (index, item) {
                            arry.push(item.time)
                            arry1.push(item.count)
                        })

                        $(document).on('click','#zhe',function(){
                        var myChart;
                        require.config({
                            paths: {
                                echarts: '/admin/lib/echarts'
                            }
                        });
                        require(
                            [
                                'echarts',
                                'echarts/chart/bar',
                                'echarts/chart/line',
                                'echarts/chart/map'
                            ],
                            function (ec) {
                                //--- 折柱 ---
                                myChart = ec.init(document.getElementById('chart'));
                                myChart.setOption(
                                    {
                                        title: {
                                            text: '门诊看诊人数',
                                            //subtext: '纯属虚构'
                                        },
                                        tooltip: {
                                            trigger: 'axis'
                                        },
                                        legend: {
                                            data: ['看诊人数']
                                        },
                                        toolbox: {
                                            show: true,
                                            feature: {
                                                mark: {show: false},
                                                dataView: {show: true, readOnly: true},
                                                magicType: {show: true, type: ['line', 'bar']},
                                                restore: {show: true},
                                                saveAsImage: {show: true}
                                            }
                                        },
                                        calculable: true,
                                        xAxis: [
                                            {
                                                type: 'category',
                                                boundaryGap: false,
                                                data: arry
                                            }
                                        ],
                                        yAxis: [
                                            {
                                                type: 'value',
                                                axisLabel: {
                                                    formatter: '{value} '
                                                }
                                            }
                                        ],
                                        series: [
                                            {
                                                name: '看诊人数',
                                                type: 'line',
                                                data: arry1

                                            }
                                        ]
                                    })
                            })

                    })
                }
            });
        }
    });


        $(document).on('click','#mian',function(){
            var myChart;
            require.config({
                paths: {
                    echarts: '/admin/lib/echarts'
                }
            });
            require(
                [
                    'echarts',
                    'echarts/chart/bar',
                    'echarts/chart/line',
                    'echarts/chart/map'
                ],
                function (ec) {
                    //--- 折柱 ---
                    myChart = ec.init(document.getElementById('chart'));
                    myChart.setOption(
                        {
                            title : {
                                text: '门诊看诊人数 ',

                            },
                            tooltip : {
                                trigger: 'axis'
                            },
                            legend: {
                                data:['看诊人数']
                            },
                            toolbox: {
                                show : true,
                                feature : {
                                    mark : {show: false},
                                    dataView : {show: true, readOnly:true},
                                    magicType : {show: false, type: ['line', 'bar']},
                                    restore : {show: true},
                                    saveAsImage : {show: true}
                                }
                            },
                            calculable : true,
                            xAxis : [
                                {
                                    type : 'category',
                                    boundaryGap : false,
                                    data :arry
                                }
                            ],
                            yAxis : [
                                {
                                    type : 'value'
                                }
                            ],
                            series : [
                                {
                                    name:'看诊人数',
                                    type:'line',
                                    smooth:true,
                                    itemStyle: {normal: {areaStyle: {type: 'default'}}},
                                    data:arry1
                                }
                            ]
                        });
                })
        })

        // //图表
        //
        // $(window).resize(function(){
        //     myChart.resize();
        // })

    });
</script>
</body>
</html>